<template>
	<view class="switch-container" :class="{'active':checked}" :disabled="disabled" @click="befoerChange">
	</view>
</template>

<script>
	export default {
		name: "m-switch",
		data() {
			return {
				checked: true,
			};
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			checked(val) {
				this.$emit('onChange', val)
			},
		},
		methods: {
			befoerChange() {
				this.$emit('befoerChange', !this.checked)
				console.log(1)
				this.checked = !this.checked
			},
		}

	}
</script>

<style lang="scss">
	/*改变大小只需要改变这个两个的值，后面会用到这两个值*/
	.switch-container {

		-webkit-appearance: none;
		appearance: none;
		position: relative;
		width: 80rpx;
		height: 48rpx;
		border: 1rpx solid #dfdfdf;
		outline: 0;
		border-radius: 16px;
		box-sizing: border-box;
		background: #dfdfdf;
		transition: all .4s;
		&:before {
			content: " ";
			position: absolute;
			top: -2rpx;
			left: 0;
			width: 48rpx;
			height: 48rpx;
			background-color: #fff;
			box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, .4);
			border-radius: 15px;
			transition: -webkit-transform .3s;
			-webkit-transition: -webkit-transform .3s;
			transition: all .3s;
			transition: transform .3s, -webkit-transform .3s;
		}
	}
	.active {
		background: var(--theme);
		border: 1rpx solid var(--theme);
		&:before {
			transform: translateX(33rpx);
		}
	}
</style>
